import React, { useEffect, useState } from 'react';
import { Space, Table, Drawer } from 'antd';
import type { TableProps } from 'antd';



interface DataType {
  key: string;
  operatID: string;
  operatTime: string;
  operatPerson: string;
  status: string;
}

const data: DataType[] = [
  {
    key: '1',
    operatID: '232333456',
    operatTime: (new Date()).toLocaleDateString(),
    operatPerson: '小雨',
    status: "上线"
  },
  {
    key: '2',
    operatID: '232333456',
    operatTime: (new Date()).toLocaleDateString(),
    operatPerson: '小雨',
    status: "审批驳回"
  },
  {
    key: '3',
    operatID: '232333456',
    operatTime: (new Date()).toLocaleDateString(),
    operatPerson: '小雨',
    status: "审批驳回"
  },
  {
    key: '1',
    operatID: '232333456',
    operatTime: (new Date()).toLocaleDateString(),
    operatPerson: '小雨',
    status: "上线"
  },
  {
    key: '2',
    operatID: '232333456',
    operatTime: (new Date()).toLocaleDateString(),
    operatPerson: '小雨',
    status: "审批驳回"
  },
  {
    key: '3',
    operatID: '232333456',
    operatTime: (new Date()).toLocaleDateString(),
    operatPerson: '小雨',
    status: "审批驳回"
  },
  {
    key: '1',
    operatID: '232333456',
    operatTime: (new Date()).toLocaleDateString(),
    operatPerson: '小雨',
    status: "上线"
  },
  {
    key: '2',
    operatID: '232333456',
    operatTime: (new Date()).toLocaleDateString(),
    operatPerson: '小雨',
    status: "审批驳回"
  },
  {
    key: '3',
    operatID: '232333456',
    operatTime: (new Date()).toLocaleDateString(),
    operatPerson: '小雨',
    status: "审批驳回"
  },
];

export default function Sider({ detail }) {
  const [open, setOpen] = useState(false);
  const [index, setIndex] = useState(0);
  const [operate, setOperate] = useState([])
  useEffect(() => {
    setOperate(detail.operates)
  }, [detail])


  const showDrawer = (ind: number) => {
    setIndex(ind);
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };


  const columns: TableProps<DataType>['columns'] = [
    {
      title: '操作记录ID',
      dataIndex: 'operatID',
      key: 'operatID',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '操作时间',
      dataIndex: 'operatTime',
      key: 'operatTime',
    },
    {
      title: '操作人',
      dataIndex: 'operatPerson',
      key: 'operatPerson',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record, index) => (
        <Space size="middle">
          <a onClick={() => showDrawer(index)}>查看备注</a>
        </Space>
      ),
    },
  ];
  return (
    <>
      <Table columns={columns} pagination={{ pageSize: 6 }} dataSource={detail.operates} />
      <Drawer
        title="备注消息"
        placement='left'
        closable={false}
        onClose={onClose}
        open={open}
        key={'left'}
      >
        <>
          {operate.length === 0 ? "" : operate[+index].comment}
        </>
      </Drawer>
    </>
  )
}